<template>
  <CommonHeader title="商品列表" />
  <!-- 排序栏 -->
  <div class="order-bar">
    <div
      @click="switchOrderStatus(0)"
      :class="['order', 'sale', { active: orderStatus.orderIndex === 0 }]"
    >
      销量
    </div>
    <div
      @click="switchOrderStatus(1)"
      :class="['order', 'price', { active: orderStatus.orderIndex === 1 }]"
    >
      价格
      <div
        :class="[
          'angle',
          'up',
          {
            active: orderStatus.orderIndex === 1 && orderStatus.upDown === 1,
          },
        ]"
      ></div>
      <div
        :class="[
          'angle',
          'down',
          {
            active: orderStatus.orderIndex === 1 && orderStatus.upDown === 0,
          },
        ]"
      ></div>
    </div>
    <div
      @click="switchOrderStatus(2)"
      :class="['order', 'time', { active: orderStatus.orderIndex === 2 }]"
    >
      新品
      <div
        :class="[
          'angle',
          'up',
          {
            active: orderStatus.orderIndex === 2 && orderStatus.upDown === 1,
          },
        ]"
      ></div>
      <div
        :class="[
          'angle',
          'down',
          {
            active: orderStatus.orderIndex === 2 && orderStatus.upDown === 0,
          },
        ]"
      ></div>
    </div>
  </div>
  <div class="container">
    <div class="items">
      <div
        class="item"
        @click="enterDetail(item.id)"
        v-for="item in items"
        :key="item.id"
      >
        <img :src="item.pic" alt="" class="item-img" />
        <div class="item-info">
          <h3>{{ item.name }}</h3>
          <div class="item-action">
            <p class="price">￥{{ item.minPrice }}</p>
            <van-icon
              name="gouwuchetianjia"
              color="#f66"
              :size="20"
              class-prefix="icon"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /排序栏 -->
</template>

<script setup lang="ts" name="itemLists">
import CommonHeader from "@/components/CommonHeader.vue";
import { reactive, ref, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import api from "@/api";

const route = useRoute();
const router = useRouter();
const orderStatus = reactive({
  orderIndex: 0, // 0 销量 1 价格 2 新品
  upDown: 1, // 1 升序 0 降序
});
// 列表排序 参数
const orderByStatus = computed<string>(() => {
  let orderBy = "ordersDown";
  switch (orderStatus.orderIndex) {
    case 0:
      // 销量
      orderBy = "ordersDown";
      break;
    case 1:
      // 价格
      if (orderStatus.upDown === 1) {
        orderBy = "priceUp";
      } else {
        orderBy = "priceDown";
      }
      break;
    case 2:
      // 发布时间
      if (orderStatus.upDown === 1) {
        orderBy = "addedUp";
      } else {
        orderBy = "addedDown";
      }
      break;
    default:
      break;
  }
  return orderBy;
});
// 点击排序栏按钮切换排序状态
const switchOrderStatus = (orderIndex: number) => {
  /* 
    1 切换排序  比如 点击 价格排序，此时并不是按照价格排序（切换到该排序状态 升序降序默认值根据实际业务需求）
    2 点击切换 升序降序 现在就是 按照点击排序规则 
  */
  if (orderIndex !== orderStatus.orderIndex) {
    // 切换排序状态
    orderStatus.orderIndex = orderIndex;
    // 升序降序定义合理的默认值
    switch (orderIndex) {
      case 1: // 切换到价格
        orderStatus.upDown = 1;
        break;

      default:
        orderStatus.upDown = 0;
        break;
    }
  } else {
    // 切换升序和降序
    if (orderStatus.upDown === 1) {
      orderStatus.upDown = 0;
    } else {
      orderStatus.upDown = 1;
    }
  }
};
watch(orderByStatus, () => {
  fetchItems();
});
// 获取商品列表
const items = ref<Item[]>([]);
const fetchItems = () => {
  api
    .fetchItems({
      categoryId: route.params.cateId,
      orderBy: orderByStatus.value,
    })
    .then((res) => {
      if (res.data.code === 0) {
        items.value = res.data.data.result;
      }
    });
};
// 跳转到商品详情
const enterDetail = (id: number) => {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
};
onMounted(() => {
  fetchItems();
});
</script>

<style scoped lang="scss">
.order-bar {
  height: 40px;
  width: 100%;
  position: fixed;
  left: 0;
  top: 46px;
  background-color: #fafafa;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .order {
    position: relative;
    &.active {
      color: #ff5930;
    }
    .angle {
      width: 0;
      height: 0;
      border: 5px solid transparent;
      position: absolute;
      right: -12px;
      &.up {
        border-bottom-color: #666;
        top: 0;
        &.active {
          border-bottom-color: #ff5930;
        }
      }
      &.down {
        border-top-color: #666;
        &.active {
          border-top-color: #ff5930;
        }
        top: 12px;
      }
    }
  }
}
.container {
  padding-top: 86px;
  .item {
    display: flex;
    &-img {
      width: 3rem;
    }
    &-info {
      padding: 0 10px;
      flex: 1;
      .item-action {
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
</style>
